<template>
  <f7-page class="qm-page">
    <f7-link icon-f7="chevron_left" class="arrow" back></f7-link>
    <f7-link class="qm-link">密码登录</f7-link>
    <f7-block class="qm-block">
      <f7-block-title class="qm-block-title">
        <div class="mobile-phone">手机号登录/注册</div>
        <div class="project">快速登录，一站式记录你的项目</div>
      </f7-block-title>
      <qm-search
        placeholder="输入手机号码"
        v-model="user"
        label=""
        shape="round"
        clearable
        left-icon=""
      >
        <template #label>
          + 86 <f7-icon f7="arrowtriangle_down_fill" size="4px" class="ui-f7-icon"></f7-icon>
        </template>
      </qm-search>
      <f7-button raised fill round class="qm-button">获取验证码</f7-button>
      <qm-divider class="divider" > 其他登录方式 </qm-divider>
      <f7-row class="qm-row">
        <f7-col
          ><img src="static/img/land/index9/login_weixin.png" alt="" />
        </f7-col>
        <f7-col
          ><img src="static/img/land/index9/logo_shualian.png" alt="" />
        </f7-col>
        <f7-col
          ><img src="static/img/land/index9/logo_shouji.png" alt="" />
        </f7-col>
      </f7-row>
      <div class="footer">广州市齐明软件科技有限公司提供技术支持</div>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      user: "",
      password: "",
      showpassword: false,
    };
  },
  computed: {
  },
  methods: {
  },
};
</script>

<style lang="less" scoped>
.arrow{
  position: fixed;
  color: var(--color-text-base);
  margin-top: 10px;
  left: 6%;
  }
.qm-page {
  background: url("../../../../static/img/land/index9/bg_login9.png");
  background-repeat: no-repeat;
  margin: 0px;
  background-size: 100% auto;
  background-attachment: fixed;
  width: 100%;
  height: 100vh;
  .qm-link {
    margin-left: 80%;
    margin-top: calc(55px * var(--ratio));
    color: #ffffffcd;
  }
  .qm-block {
    --f7-block-margin-vertical: calc(80px * var(--ratio));
    /deep/ .van-field__control{
          margin-left: 10px;
    }
    .qm-block-title {
      --f7-block-title-line-height: 36px;
      --f7-block-title-margin-bottom: calc(100px * var(--ratio));
      margin-left: calc(50px * var(--ratio));
      .mobile-phone {
        font-size: 24px;
        font-weight: 400;
        color: var(--color-text-base);
      }
      .project {
        font-size: 16px;
        color: hsla(0, 0%, 100%, 0.775);
      }
    }
    .ui-f7-icon{
      line-height: 4px;
      color: #ffffffc9;
    }
    /deep/ .van-search__label{
      color: #ffffffc9;
      line-height: 46px;
    }
    /deep/ .van-search__content {
      background-color: #f1f4f833;
    }
    /deep/ .van-search {
      padding-left: 15px;
      padding-right: 15px;
      background-color: #fff0;
    }
    /deep/.van-cell {
      height: calc(96px * var(--ratio));
      line-height: calc(80px * var(--ratio));
    }
    .qm-button {
      margin: calc(50px * var(--ratio)) 12px 0px;
      background-color: var(--color-brand);
      color: var(--color-text-base);
      font-size: var(--font-size-maintitle);
      --f7-button-raised-box-shadow: auto;
    }
    /deep/ .van-divider{
      border-color: rgba(255, 255, 255, 0);
    }
    .divider {
      color: var(--color-text-base);
      margin: 65% calc(94px * var(--ratio)) 0px;
    }
    .qm-row {
      margin: calc(58px * var(--ratio)) calc(94px * var(--ratio)) 0px;
      text-align: center;
      color: var(--color-text-base);
      img {
        width: calc(93px * var(--ratio));
        height: calc(93px * var(--ratio));
      }
    }
    .footer {
      position: absolute;
      text-align: center;
      color: var(--color-text-subtext);
      font-size: 12px;
      left: 0px;
      right: 0px;
      margin-top: 80px;
    }
  }
  /deep/input:-webkit-autofill { box-shadow: 0 0 0px 1000px #3385ff inset !important;}
}
</style>
